<template>
	<view class="bigbox">
		<view class="boxs" v-for="(item,index) in arr" :key="index">
			<view class="name">
				{{item.contact}}
			</view>
			<view class="telephone">
				{{item.contact_number}}
			</view>
			<view class="remark">
				备注信息
			</view>
			<view class="housing" v-for="(v,i) in item.isopen ? item.remarks : item.smallLsit" :key="i">
				{{v}}
			</view>
			<view class="operation" @click="zhankai(index)" v-if="item.show">
				<text :class="!item.isopen ? 'kailong':'kailongs'"></text>
				<text class="unfold">{{!item.isopen ? '展开':'收起'}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {myleader} from "../../api/api/index"
	export default {
		data() {
			return {
				page:0,
				limit:20,
				isOk:false,
				arr:[],
				itemindex:0,
				Allremark:[]
			}
		},
		methods:{
			public(){
				if (this.isOk) {
					return uni.showToast({
						icon: 'none',
						title: '没有更多了'
					})
				}
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				this.page++
				let data = {
					page: this.page,
					limit: this.limit
				}
				myleader(data).then(res=>{
					uni.hideLoading()
					let list = res.data.map(v=>{
						if(v.remarks.length > 1){
							v.show = true
							v.smallLsit = [v.remarks[0]]
						}
						v.isopen = false
						return v
					})
					this.arr=list
					this.isOk=true
				})
			},
			zhankai(index){
				this.arr[index].isopen = !this.arr[index].isopen
				// this.itemindex=index
			}
		},
		onLoad() {
		},
		onShow() {
			this.public()
		},
		onReachBottom() {
			this.public()
		}
	}
</script>

<style scoped lang="less" scoped>
	.bigbox {
		padding: 20rpx;
		box-sizing: border-box;

		.boxs {
			width: 709rpx;
			background-color: #ffffff;
			border-radius: 10rpx;
			padding: 35rpx 35rpx 20rpx 35rpx;
			box-sizing: border-box;
			box-shadow: 3rpx 4rpx 7rpx 0rpx rgba(180, 180, 180, 0.46);
			margin-bottom: 20rpx;

			.name {
				font-family: MicrosoftYaHei-Bold;
				font-size: 30rpx;
				color: #000000;
			}

			.telephone {
				font-family: PingFang-SC-Heavy;
				font-size: 24rpx;
				color: #666666;
				margin-top: 28rpx;
				margin-bottom: 51rpx;
			}

			.remark {
				font-family: MicrosoftYaHei-Bold;
				font-size: 24rpx;
				color: #000000;
				margin-bottom: 17rpx;
			}

			.housing {
				font-family: MicrosoftYaHei;
				font-size: 24rpx;
				color: #666666;
				width: 100%;
			}

			.operation {
				display: flex;
				align-items: center;
				margin-left: 280rpx;
				margin-top: 48rpx;
				.unfold {
					font-family: MicrosoftYaHei;
					font-size: 22rpx;
					color: #ff3333;
					vertical-align: middle;
				}

				.kailong {
					width: 0;
					height: 0;
					border-right: 10rpx solid transparent;
					border-left: 10rpx solid transparent;
					border-top: 10rpx solid #ff3333;
					vertical-align: middle;
				}

				.kailongs {
					width: 0;
					height: 0;
					border-right: 10rpx solid transparent;
					border-left: 10rpx solid transparent;
					border-bottom: 10rpx solid #ff3333;

				}
			}
		}

	}
</style>
